<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-date-picker
        v-model="dateTime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
      @change="changeDate">
      </el-date-picker>
      <el-form-item label="区域" prop="code">
        <el-select v-model="queryParams.areaName" placeholder="请选择区域" filterable clearable size="small">
          <el-option
            v-for="item in regionList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>



      <el-form-item label="客户" prop="closed">
        <el-select v-model="queryParams.gid" placeholder="请选择客户" filterable clearable size="small">
          <el-option
            v-for="item in guestList"
            :key="item.gid"
            :label="item.name"
            :value="item.gid"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="支付方式" prop="name">
        <el-select v-model="queryParams.payid" placeholder="请选择支付方式" clearable size="small">
          <el-option
            v-for="item in paymethodList"
            :key="item.payid"
            :label="item.name"
            :value="item.payid"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="reportList" >
      <el-table-column label="订单号" prop="billcode" width="180" />
      <el-table-column label="区域" prop="county" />
      <el-table-column label="客户" prop="name"  />
      <el-table-column label="商品" prop="wayGoodsName" />
      <el-table-column label="数量" prop="wayQuantity" >
        <template slot-scope="scope">
          {{scope.row.wayQuantity+" "+scope.row.wayUnitname}}
        </template>
      </el-table-column>
      <el-table-column label="总价"  >
        <template slot-scope="scope">
          {{scope.row.amount+"元"}}
        </template>
      </el-table-column>
      <el-table-column label="支付方式" prop="payName" />
    </el-table>
  </div>
</template>

<script>
import {getPaymethodAll} from "@/api/system/paymethod";
import {listGuestAll} from "@/api/system/guest";
import {listGoodsAll} from "@/api/system/goods";
import {getOrderReport} from "@/api/system/orderbill";
import { getRegionQuery} from "@/api/system/region";

export default {
  name: "orderReport",
  data() {
    var date = new Date(), y = date.getFullYear(), m = date.getMonth();
    var firstDay = new Date(y, m, 1);
    var lastDay = new Date(y, m + 1, 0);
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 清运单主表格数据
      reportList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //客户
      guestList:[],
      //支付类型
      paymethodList:[],
      //区域
      regionList:[],
      //时间
      dateTime:[firstDay,lastDay],
      //时间参数
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 查询参数
      queryParams: {
        state:2,
        gid:null,
        areaName:null,
        payid:null,
        startTime:null,
        endTime:null,
      },
    };
  },
  created() {
    this.getList();
    this.getPaymethodList();
    this.getGuesList();
    this.getRegionList();
  },
  methods: {
    getGoodsList() {
      listGoodsAll().then(response => {
        this.goodsList = response.data;
      })
    },
    getPaymethodList(){
      getPaymethodAll().then(response => {
        this.paymethodList= response.data;
      })
    },
    getGuesList(){
      listGuestAll().then(response => {
        this.guestList = response.data;
      })
    },
    getRegionList() {
      getRegionQuery().then(response => {
        this.regionList = response.data;
      });
    },
    payMatching(payid){
      let name = "-";
      this.paymethodList.map(item => {
        if (payid == item.payid) {
          name = item.name;
          return
        }
      })
      return name;
    },
    guesMatching(gid) {
      let name = "-";
      this.guestList.map(item => {
        if (gid == item.gid) {
          name = item.name;
          return
        }
      })
      return name;
    },
    employeeMatching(employeeId) {
      let name = "-";
      this.employeeList.map(item => {
        if (employeeId == item.empid) {
          name = item.name;
          return
        }
      })
      return name;
    },

    driverMatching(employeeId) {
      let name = "-";
      this.driverList.map(item => {
        if (employeeId == item.empid) {
          name = item.name;
          return
        }
      })
      return name;
    },
    /** 查询清运单主列表 */
    getList() {
      this.loading = true;
      getOrderReport(this.queryParams).then(response => {
        this.reportList = response.rows;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加清运单主";
      this.getOrderNotWaybillList(null);
      this.getCode();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/waybill/export', {
        ...this.queryParams
      }, `waybill_${new Date().getTime()}.xlsx`)
    },
    changeDate(data){
      if(data!=null){
        this.queryParams.startTime=data[0]
        this.queryParams.endTime=data[1]
      }else {
        this.queryParams.startTime=null;
        this.queryParams.endTime=null;
      }
    }
  }
};
</script>
